<template>
  <view class="">
    <view class="header">
      <view style="padding: 0 38rpx">
        <view class="title">购物车</view>
      </view>
    </view>
    <view class="main">
      <view class="tabCon">
        <!-- <view class="tabBox">
          <view :class="{ item: true, active: tabActive === '1' }" @click="tabClick('1')">配送上门</view>
          <view :class="{ item: true, active: tabActive === '2' }" @click="tabClick('2')">门店自提</view>
        </view> -->
        <view @click="goPage('/pages/myPage/myShippingAddress')">
          <view v-if="defaultAddressInfo" class="nameBox">
            <view style="display: flex; align-items: center">
              <image class="img" src="../../static/dz.png" mode=""></image>
              <view class="nameInfo">
                <view class="f">
                  <text>{{ defaultAddressInfo?.userName }}</text>
                  {{ defaultAddressInfo?.cell }}
                </view>
                <view class="s">{{ defaultAddressInfo?.address }}</view>
              </view>
            </view>
            <u-icon name="arrow-right"></u-icon>
          </view>
          <view class="nameBox" v-else style="justify-content: center; color: #1e1e1e">点击前往添加</view>
        </view>
      </view>
    </view>
    <view class="main secondBox">
      <view class="firstLine">
        <view class="left">供应商明辉蔬果</view>
        <view class="right">10-13 06:15 - 06:15 <u-icon name="arrow-right" @click="goPage('/pages/shopCar/shopList')"></u-icon></view>
      </view>
      <view class="shopSelect">
        <view class="left">
          <u-scroll-list :indicator="false">
            <view class="imgBox" v-for="(item, index) in 8" :key="index">
              <image src="" mode=""></image>
            </view>
          </u-scroll-list>
        </view>
        <view class="right">
          共5件
          <u-icon name="arrow-right"></u-icon>
        </view>
      </view>
      <view class="labelLine">
        <view class="label">留言备注：</view>
        <view class="value" style="color: #bebebe">对订单进行备注说明 <u-icon name="arrow-right"></u-icon></view>
      </view>
    </view>
    <view class="main secondBox">
      <view class="labelLine">
        <view class="label">支付方式：</view>
        <view class="value" style="color: #bebebe">对订单进行备注说明 <u-icon name="arrow-right"></u-icon></view>
      </view>
      <view class="labelLine">
        <view class="label">运费：</view>
        <view class="value">+￥0.00</view>
      </view>
      <view class="labelLine">
        <view class="label">总计：</view>
        <view class="value" style="color: #f35555">￥66.00</view>
      </view>
    </view>
    <view class="bottomBox">
      <view class="price">
        合计：
        <text class="unit">￥</text>
        <text class="num">123</text>
      </view>
      <view class="btn" @click="goPage('')">下单</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { goPage } from "../../utils/commonFn";
const defaultAddressInfo = ref({
  userName: "shanhe",
  cell: "14122312312",
  address: "asdasdasdas",
});
const tabActive = ref("1");
const tabClick = (e: string) => {
  tabActive.value = e;
};
</script>

<style lang="less" scoped>
.header {
  height: 298rpx;
}
.tabCon {
  background: #fff;
  border-radius: 16rpx 16rpx 0 0;
  margin-top: -200rpx;
  width: 100%;

  .tabBox {
    display: flex;
    text-align: center;
    justify-content: space-between;
    border-radius: 16rpx 16rpx 0 0;
    background: #f2f8f4;

    .item {
      height: 80rpx;
      width: 50%;
      line-height: 80rpx;
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
    }
    .active {
      height: 90rpx;
      margin-top: -10rpx;
      background: #fff;
      border-radius: 16rpx 16rpx 0 0;
      line-height: 110rpx;
      font-weight: 600;
      font-size: 32rpx;
      transition: all 0.2s;
    }
  }
  .nameBox {
    padding: 32rpx;
    display: flex;
    margin-bottom: 20rpx;
    align-items: center;
    justify-content: space-between;
    .img {
      width: 40rpx;
      height: 60rpx;
      margin-right: 24rpx;
    }
    .nameInfo {
      .f {
        font-size: 28rpx;
        font-weight: 500;
        color: #333333;
        line-height: 36rpx;
        text {
          margin-right: 24rpx;
        }
      }
      .s {
        font-size: 26rpx;
        color: #bebebe;
        line-height: 36rpx;
        margin-top: 8rpx;
      }
    }
  }
}
.secondBox {
  background: #fff;
  padding: 32rpx;
  margin-bottom: 16rpx;
}
.firstLine {
  display: flex;
  justify-content: space-between;
  padding-bottom: 24rpx;
  border-bottom: 1px solid #f5f5f5;
  .left {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    color: #333333;
    line-height: 44rpx;
    font-weight: 600;
  }
  .right {
    display: flex;
    align-items: center;
    font-size: 26rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #21cca2;
    line-height: 36rpx;
  }
}
.shopSelect {
  display: flex;
  justify-content: space-between;
  .left {
    width: 88%;
  }
  .right {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6%;
    text-align: center;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    color: #1e1e1e;
    line-height: 32rpx;
  }
  .imgBox {
    width: 176rpx;
    height: 176rpx;
    border-radius: 8rpx;
    position: relative;
    margin-top: 30rpx;
    margin-right: 20rpx;
    image {
      width: 176rpx;
      height: 176rpx;
      background: #7ca6bc;
    }
  }
}
.labelLine {
  display: flex;
  font-size: 26rpx;
  justify-content: space-between;
  margin-top: 20rpx;
  .label {
    color: #333333;
  }
  .value {
    display: flex;
    align-items: center;
    font-family: DINPro-Medium, DINPro;
    font-weight: 500;
    color: #333333;
  }
  &:first-child {
    margin-top: 0rpx;
  }
}
.bottomBox {
  bottom: 90rpx;
}
</style>
